<template>
	<view class="box">
		<view class="margin"></view>
		<view class="map_box1">
			<view :class="mapsty ? 'map_box2' : 'map_box2_style'">
				<map id="map1" style="width: 100%; height: 100%;" show-location :latitude="latitude"
					:longitude="longitude" :markers="covers" scale="16">
				</map>
			</view>
			<view class="map_tip" @tap="handleMapsty">
				<text>收起地图</text>
			</view>
		</view>

		<view class="list_box1">
			<view class="list" v-for="(val,index) in poidata" @tap="location(val.location)">
				<view class="list_ul">
					<view class="left">
						<view class="list_li name">
							<text>{{val.title}}</text>
						</view>
						<view class="list_li">
							<view class="p1">
								<view class="p1_left">
									NOW
								</view>

								<view class="p1_right">
									现在下单,立即制作
								</view>
							</view>
						</view>
						<view class="list_li location">
							<van-icon name="location-o" />
							<text>{{val.address}}</text>
						</view>
						<view class="list_li status">
							<view class="but">
								营业中
							</view>
						</view>

					</view>
					<view class="xian"></view>
					<view class="right">
						<view class="p2_right">
							<view class="tip1_box">
								<view class="tip1 tip">
									去下单
								</view>
								<view class="tip2 tip">
									距离76m
								</view>
							</view>

						</view>
						<view class="p2_right">
							<view class="icon_box">
								<view class="i1 icon">
									<van-icon name="phone-o" />
								</view>
								<view class="margin"></view>
								<view class="i2 icon">
									<van-icon name="guide-o" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import QQMapWX from '../../static/api/qqmap-wx-jssdk.js'
	export default {
		data() {
			return {
				key: 'EYJBZ-3TO6K-CFNJS-AQRF3-JHMBQ-E5BRJ',
				latitude: 24.9034,
				longitude: 118.541,
				address: '福建省福州市',
				poidata: [],
				covers: [{
					id: 1,
					width: 35,
					height: 35,
					iconPath: '../../static/images/location/location.png',
					latitude: 24.9034,
					longitude: 118.541,
					mapCtx: null
				}],
				mapsty: true,

			};
		},
		mounted() {
			let qqmapsdk = new QQMapWX({
				key: 'EYJBZ-3TO6K-CFNJS-AQRF3-JHMBQ-E5BRJ'
			})
			let that = this
			uni.getLocation({ //获取经纬度
				type: 'gcj02',
				success: (res) => {
					that.latitude = res.latitude
					that.longitude = res.longitude



					qqmapsdk.reverseGeocoder({ //调用腾讯地图api逆地址解析
						location: {
							latitude: 24.9034,
							longitude: 118.541,
						},
						get_poi: 1,
						//是否返回周边列表
						success(res) {
							console.log(res.result.pois)
							that.poidata = res.result.pois
						}
					})

					qqmapsdk.calculateDistance({
						from: {
							latitude: this.latitude,
							longitude: this.longitude
						},
						to:[{
						location:{
						  lat:39.984060,
						  lng:116.307520
						}
						
						},
						{
						location:{
						  lat:49.984060,
						  lng:126.307520
						},
						
						}
						
						],
						
						
						
						success(res) {
							console.log(res.result)
							//hat.poidata = res.result.pois
						},
						
					})
					
					let ap =123
					console.log(ap)
					// uni.request({
					//     url: 'https://apis.map.qq.com/ws/geocoder/v1/?', //仅为示例，并非真实接口地址。
					//     data: {
					// 	    key: 'EYJBZ-3TO6K-CFNJS-AQRF3-JHMBQ-E5BRJ',
					//         location: `${24.9034},${118.541}`,
					// 		get_poi: 1

					//     },
					//     success: (res) => {
					//         console.log(res.data);
					// 		that.poidata = res.data.result.pois
					//     }
					// });
				}
			})




		},
		methods: {
			location(e) {
				this.covers[0].latitude = e.lat
				this.covers[0].longitude = e.lng
				let mapcontex = uni.createMapContext('map1')
				mapcontex.moveToLocation({
					latitude: e.lat,
					longitude: e.lng
				})
			},
			handleMapsty() {
				let aa=123
				console.log(a)
				this.mapsty = !this.mapsty
			}
		}
	}
</script>

<style scoped>
	.box {
		width: 100%;
		height: 100vm;
		background-color: #F0F0F0;
	}

	.xian {
		width: 0.5px;
		height: 100%;
		float: left;
		background-color: #d5d5d5;
	}

	.margin {
		width: 100%;
		height: 20rpx;
		background-color: #F0F0F0;
	}

	.map_box1 {
		width: 95%;
		height: auto;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-radius: 10rpx;

	}

	.map_box2 {
		width: 100%;
		height: 430rpx;
		opacity: 1;
		transition: all 0.5s;
	}

	.map_box2_style {
		width: 100%;
		height: 0rpx;
		opacity: 0;
		transition: all 0.5s;
	}

	.map_tip {
		width: 95%;
		line-height: 80rpx;
		text-align: center;
		margin: 0 auto;
		font-size: 0.9rem;
		color: #3b3b3b;
	}

	.list_box1 {
		width: 95%;
		height: auto;
		margin: 0 auto;
	}

	.list {
		width: 100%;
		height: 300rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		position: relative;
		border-radius: 20rpx;
	}

	.list_ul {
		width: 93%;
		height: 80%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.left {
		width: 70%;
		height: 100%;
		float: left;

	}

	.right {
		width: 29%;
		height: 100%;
		float: left;
	}

	.list_li {
		width: 100%;
		height: 25%;
	}

	.left .name {
		font-size: 1rem;
		font-weight: 700;
	}

	.left .p1 {
		width: 90%;
		height: 70%;
		border-radius: 10rpx;
	}

	.p1 .p1_left {
		width: 25%;
		line-height: 35rpx;
		text-align: center;
		float: left;
		background-color: #007860;
		color: #FFFFFF;
		font-size: 0.8rem;
		padding: 3rpx;
	}

	.p1 .p1_right {
		width: 70%;
		line-height: 35rpx;
		text-align: center;
		float: left;
		background-color: #C8F0C0;
		font-size: 0.7rem;
		color: #007860;
		padding: 3rpx;
	}

	.left .location {
		width: 100%;
		font-size: 0.7rem;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.left .but {
		width: 120rpx;
		line-height: 50rpx;
		text-align: center;
		border: 1rpx solid #008769;
		color: #008769;
		font-size: 0.8rem;
		border-radius: 8rpx;

	}

	.p2_right {
		width: 100%;
		height: 50%;
		text-align: center;
		position: relative;
	}

	.p2_right .tip1_box {
		width: 100%;
		height: 100%;
		float: left;
	}

	.p2_right .tip {
		margin-top: 10rpx;
	}

	.p2_right .tip1 {
		font-size: 0.85rem;
		margin-top: 20rpx;
		color: #007860;
	}

	.p2_right .tip2 {
		font-size: 0.7rem;
		color: #979797;
		margin-top: 10rpx;
	}

	.icon_box {
		width: 90%;
		line-height: 100rpx;
		text-align: center;
		margin: 0 auto;
	}

	.icon_box .icon {
		width: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #F0F0E8;
		display: inline-block;
		border-radius: 50%;
	}

	.icon_box .margin {
		width: 20rpx;
		background-color: #FFFFFF;
		display: inline-block;
	}
</style>
